@import '../../../app/mixins.css';

.wrapper {
  display: flex;
  flex-direction: column;
  margin: 20px 0;

  & > h3 {
    @mixin headingNormal;

    color: var(--color-maastricht-blue);
    margin: 0 0 16px;
  }
}

.releaseNotes {
  @mixin customScrollBar;
  @mixin contentNormal;

  color: var(--color-slate-gray);
  border: 1px solid var(--color-platinum);
  border-radius: var(--border-radius-standard);
  flex-shrink: 1;
  max-height: 475px;
  padding: 20px 24px;

  & h3,
  & strong {
    @mixin contentLargest bold;

    color: var(--color-maastricht-blue);
    margin: 0 0 10px;
  }

  & h4,
  & ul,
  & a {
    @mixin contentNormal;

    color: var(--color-slate-gray);
    margin: 0 0 24px;
    padding: 0;
  }

  & a {
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }

  & ul {
    list-style: none;

    & li {
      padding: 0 20px;
      position: relative;

      &::before {
        background-color: var(--color-ghost);
        content: '';
        display: block;
        height: 7px;
        left: 2px;
        position: absolute;
        top: 5px;
        transform: rotate(45deg);
        width: 7px;
      }
    }
  }
}
